<!-- 包裹详情 -->
<template>
  <s-layout title="包裹详情" class="index-wrap">
    <view class="order-address-box ss-mb-40" >
      <!-- 包裹状态 -->
      <view class="state-box ss-flex-col ss-col-center ss-row-right">
        <view class="ss-flex ss-m-t-32 ss-m-b-20">
          <view class="ss-font-30" :class="'warning-color'">{{ getExpressStatusName(state.status) }}</view>
        </view>
      </view>
	    <!--邮寄渠道-->
	    <uni-tag
			    class="sold-label ss-m-r-10"
			    :text="getSendTypeText(state.orderInfo)"
			    custom-style="background-color: #F39800; border-color: #0345d5; color: #fff;" size="small">
	    </uni-tag>
      <!-- 收货地址 -->
      <view v-if="state.address" class="ss-m-t-10">
        <view class="ss-flex ss-col-center">
          <text class="address-username">
            {{ state.address.receiverName }}
          </text>
          <text class="address-phone">{{ state.address.receiverPhone }}</text>
        </view>
        <view class="address-detail">{{ state.address.fullAddress }}</view>
      </view>
    </view>

    <view class="detail-goods">
	    <view>
		    <view
				    class="bg-white order-list-card-box ss-r-10 ss-m-t-14 ss-m-20"
				    v-for="order in state.orderInfo.orderItemList"
				    :key="order.id"
		    >
			    <view class="order-card-header ss-flex ss-col-center ss-row-between ss-p-x-20" v-if="state.wms && state.orderInfo.sendType == 1">
				    <checkbox-group
						    v-if="sheep.$helper.isRealEmpty(order.customsExpressId)"
						    @change="onSelectSingle(order.orderId)"
						    class="check-box ss-flex ss-col-center ss-p-l-10"
				    >
					    <label class="radio ss-flex">
						    <checkbox
								    :checked="selectOrderIds.includes(order.orderId)"
								    color="var(--ui-BG-Main)"
								    style="transform: scale(0.8)"
						    >选择订单</checkbox>
					    </label>
				    </checkbox-group>
			    </view>
			    <view class="border-bottom">
				    <s-goods-item
						    :publish-status="order.publishStatus"
						    :img="order.pic"
						    :title="order.productName"
						    :skuText="order.productId"
						    :platformType="order.platformType"
						    :price="order.salePrice"
						    :jp-price="order.purchasePrice"
						    :num="order.quantity"
				    >
				    </s-goods-item>
			    </view>
			    <view v-if="!sheep.$helper.isRealEmpty(order.customsCategory) && state.wms" class="pay-box ss-m-t-30 ss-flex ss-row-right ss-p-r-20">
				    <view class="ss-flex ss-col-center">
					    <view class="discounts-title pay-color ss-margin-bottom-10 tag">{{ order.customsCategory }}</view>
				    </view>
			    </view>
			    <view v-if="!sheep.$helper.isRealEmpty(order.customsExpressId) && state.wms" class="pay-box ss-m-t-10 ss-flex ss-row-right ss-p-r-20">
				    <view class="ss-flex ss-col-center">
					    <view class="discounts-title pay-color ss-margin-bottom-10 tag">合箱编号: {{ order.customsExpressId }}</view>
				    </view>
			    </view>
		    </view>
	    </view>
      <!-- 包裹信息 -->
      <!--<view class="border-bottom" v-for="item in state.orderInfo.orderItemList" :key="item.id">
	      <s-goods-item
			      :img="item.pic"
			      :title="`${item.productName}`"
			      :skuText="item.productId"
			      :price="item.salePrice"
			      :num="item.memberId"
			      :pack="1"
	      >
	      </s-goods-item>
      </view>-->
    </view>
    <!-- 包裹信息  -->
    <view class="notice-box">
      <view class="notice-box__content">
        <view class="notice-item--center">
          <view class="ss-flex ss-flex-1">
            <text class="title">{{ '包裹编号：' }}</text>
            <text class="detail">{{ state.orderInfo.orderSn }}</text>
          </view>
          <button class="ss-reset-button copy-btn" @tap="onCopy(state.orderInfo.orderId)">复制</button>
        </view>
        <view class="notice-item">
          <text class="title">申请打包时间：</text>
          <text class="detail">{{ state.orderInfo.createTime }}</text>
        </view>
        <view class="notice-item" v-if="state.orderInfo.deyPaymentTime">
          <text class="title">运费支付时间：</text>
          <text class="detail">{{ state.orderInfo.deyPaymentTime}}</text>
        </view>
        <view class="notice-item" v-if="!sheep.$helper.isRealEmpty(state.orderInfo.payType)">
          <text class="title">运费支付方式：</text>
          <text v-if="state.orderInfo.payType === 2" class="detail">微信支付</text>
          <text v-if="state.orderInfo.payType === 3" class="detail">余额支付</text>
          <text v-else class="detail">其他方式</text>
        </view>
        <view class="notice-item">
          <text class="title">快递单号-国际段：</text>
          <text class="detail">{{state.orderInfo.deliverySn}}</text>
        </view>
	      <view class="notice-item">
		      <text class="title">快递单号-国内段：</text>
		      <text class="detail">{{state.orderInfo.deliverySnZh}}</text>
	      </view>
	      <view class="notice-item">
		      <text class="title">邮寄方式：</text>
		      <text class="detail">{{ getSendTypeText(state.orderInfo) }}</text>
	      </view>
	      <view class="notice-item" v-if="!sheep.$helper.isRealEmpty(state.orderInfo.note)">
		      <text class="title">打包备注：</text>
		      <text class="detail">{{ state.orderInfo.note }}</text>
	      </view>
	      <view v-if="!sheep.$helper.isRealEmpty(state.orderInfo.targetExpressNote)">
		      <text class="title">拼箱信息：</text>
		      <text class="detail">{{ state.orderInfo.targetExpressNote }}：
			      当前：{{ state.orderInfo.targetExpressCurrentNum }}件 /  容量：{{ state.orderInfo.targetExpressMaxNum }}件</text>
	      </view>
	      <view class="notice-item" v-if="!sheep.$helper.isRealEmpty(state.orderInfo.remark)">
		      <text class="title">拒绝原因：</text>
		      <text class="detail">{{ state.orderInfo.remark }}</text>
	      </view>
      </view>
    </view>
    <!--  价格信息  -->
    <view class="order-price-box">
      <view class="notice-item ss-flex ss-row-between">
        <text class="title">运费</text>
        <text class="detail">￥{{ state.orderInfo.freightAmount }}</text>
      </view>
	    <view v-if="state.orderInfo.couponAmount" class="notice-item ss-flex ss-row-between">
		    <text class="title">优惠券抵扣</text>
		    <text class="detail money">-￥{{ state.orderInfo.couponAmount }}</text>
	    </view>
	    <view v-if="state.orderInfo.scoreAmount" class="notice-item ss-flex ss-row-between">
		    <text class="title">积分抵扣</text>
		    <text class="detail money">-￥{{ state.orderInfo.scoreAmount }}</text>
	    </view>
	    <view class="notice-item ss-flex ss-row-between">
		    <text class="title">应付</text>
		    <text class="detail">￥{{ state.orderInfo.payAmount }}</text>
	    </view>
	    <view class="notice-item ss-flex ss-row-between">
		    <text class="title">重量</text>
		    <text class="detail">{{ state.orderInfo.freightHeight }}kg</text>
	    </view>
	    <view class="notice-item ss-flex ss-row-between">
		    <text class="title">尺寸</text>
		    <text class="detail">{{ state.orderInfo.size }}</text>
	    </view>
    </view>

	  <!--  邮寄方式  -->
	  <view class="order-price-box">
		  <view class="notice-item ss-flex ss-row-between">
			  邮寄方式：{{ getSendTypeText(state.orderInfo) }}
		  </view>
	  </view>

	  <view style="position: relative; margin-top: 2%; padding: 20rpx">
		  <uni-table ref="table" border stripe emptyText="暂无更多数据">
			  <uni-tr>
				  <uni-th width="220rpx" align="center">申报商品</uni-th>
				  <uni-th width="80rpx" align="center">申报单价</uni-th>
				  <uni-th width="80rpx" align="center">申报数量</uni-th>
			  </uni-tr>
			  <uni-tr v-for="(item, index) in state.tableData" :key="index">
				  <uni-td>
					  {{ item.name }}
				  </uni-td>
				  <uni-td>
					  {{ item.price }}日元
				  </uni-td>
				  <uni-td align="center">
					  {{ item.num }}件
				  </uni-td>
			  </uni-tr>
		  </uni-table>
	  </view>

	  <!--  打包图片信息  -->
	  <view class="order-price-box">
		  <view class="notice-item ss-flex ss-row-between">
			  打包图片（左右滑动查看更多，点击可放大查看）
		  </view>
		  <view v-if="state.orderInfo.packPics">
			  <view>
				  <swiper style="height: 1200rpx !important;" :autoplay="true" :indicator-dots="true" class="swiper-content">
					  <swiper-item style="height: 1200rpx !important;" v-for="it in state.orderInfo.packPics.split(',')" :key="it">
						  <su-image
								  class="content-img"
								  isPreview
								  :previewList="state.orderInfo.packPics.split(',')"
								  :current="0"
								  :src="it"
								  mode="aspectFit"
						  ></su-image>
					  </swiper-item>
				  </swiper>
			  </view>
		  </view>
	  </view>

	  <!-- 底部按钮 -->
	  <su-fixed bottom placeholder bg="bg-white" v-if="state.wms">
		  <view  v-if="selectOrderIds.length > 0" class="cart-footer ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom" style="background-color: #FFFFFF !important; height: 80rpx; box-shadow: 1px 1px 20px #cccccc; width: 90%; margin-left: 1%; border-radius: 20px">
			  <view class="footer-left ss-flex ss-col-center">
				  <checkbox-group @change="onSelectAll" class="check-box ss-flex ss-col-center ss-p-r-30">
					  <label class="radio ss-flex">
						  <checkbox
								  :checked="state.isAllSelected"
								  color="var(--ui-BG-Main)"
								  style="transform: scale(0.8)"
						  />
						  <view class="ss-m-l-8"> 全选 </view>
					  </label>
				  </checkbox-group>
				  <text>合计：{{ selectOrderIds.length }} 单</text>
			  </view>
		  </view>
		  <view class="footer-box ss-flex ss-col-center ss-row-right">
			  <button style="background-color: #ff1e00; color: #FFFFFF" class="ss-reset-button apply-btn" @tap="onSend()">
				  包裹发货
			  </button>
			  <button v-if="state.orderInfo.sendType == 1" style="background-color: #072d96; color: #FFFFFF" class="ss-reset-button apply-btn" @tap="onCategory()">
				  包裹分类
			  </button>
		  </view>
	  </su-fixed>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';
  import {onLoad, onShow} from '@dcloudio/uni-app';
  import {
	  formatOrderColor,
	  getExpressStatusName, getOrderAfterSaleStatusName,
	  getOrderCutStatusName,
	  getOrderStatusName, getPlatformsText, getSendTypeStatus
  } from '@/sheep/hooks/useGoods';
  import { computed, reactive, ref } from 'vue';
  import {clone} from "lodash";
  import {sh} from "@dcloudio/uni-cli-shared/lib/preprocess/lib/regexrules";

  const minute = ref(0)
  const second = ref(0)
  function time(endTime) {
    let date = new Date(); //现在时间
    let now = date.getTime(); //现在时间戳
    let allTime = endTime - now
    let m, s;
    if (allTime > 0) {
      m = Math.floor(allTime / 1000 / 60 % 60);
      s = Math.floor(allTime / 1000 % 60);
      minute.value = m < 10 ? '0' + m : m
      second.value = s < 10 ? '0' + s : s
      setTimeout(() => {
        time(endTime)
      }, 1000);
    }
  }

  let selectOrderIds = reactive([])

  const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
  const headerBg = sheep.$url.css('/static/img/shop/order/order_bg.png');
  const state = reactive({
    orderInfo: {},
    id: null,
	  isAllSelected: false,
	  tableData: [],
    orderId: null,
    address: {},
    status: null,
	  wms: false
  });

  const addressText = computed(() => {
    let data = state.orderInfo.address;
    if (data) {
      return `${data.province_name} ${data.city_name} ${data.district_name} ${data.address}`;
    }
    return '';
  });

  // 复制
  const onCopy = (data) => {
    sheep.$helper.copyText(data);
  };
  //退款总额
  const refundFee = computed(() => {
    let refundFee = 0;
    state.orderInfo.items?.forEach((i) => {
      refundFee += Number(i.refund_fee);
    });
    return refundFee;
  });
  // 去支付
  function onPay(data) {
    console.log('data',data)
    sheep.$router.go('/pages/pay/index', {
      orderSN:data.orderSn,
      totalAmount: data.totalAmount,
      orderType: 'memberConsumer',
	    rate: data.rate
    });
  }


  /**
   * 选择订单
   */
  function onSelectSingle(orderId) {
	  if (!selectOrderIds.includes(orderId)) {
		  selectOrderIds.push(orderId);
	  } else {
		  selectOrderIds.splice(selectOrderIds.indexOf(orderId), 1);
	  }
	  console.log(selectOrderIds)
  }


  // 支付图片费用
  function onPicPay(data) {
	  uni.showModal({
		  title: '提示',
		  content: '获取仓库更多实拍图需要支付费用，是否确认支付实拍费用，来获取货物在仓库的多角度图片？',
		  success: async function (res) {
			  if (res.confirm) {
				  console.log('data',data)
				  sheep.$router.go('/pages/pay/index', {
					  orderSN:data.orderSn,
					  totalAmount: data.totalAmount,
					  orderType: 'memberConsumerPicPay'
				  });
			  }
		  },
	  });
  }

  /**
   * 获取日本状态
   * @param status
   * @returns {string}
   */
  function getOrderProcureStatusText(status){
	  switch (status){
		  case 0:
			  return '【代切中】等待【代切成功】';
		  case 1:
			  return '【代切失败】请申请退款';
		  case 2:
			  return '【代切成功】 等待【日本卖家发货】';
		  case 3:
			  return '【日本卖家发货】等待【日本仓库收货】';
		  case 4:
			  return '日本仓库收货 等待 【发货】';
	  }
  }

	function onSend() {
		if (!state.wms) {
			sheep.$helper.toast('请等待仓库发货')
			return
		}
		uni.showModal({
			title: '提示',
			content: '确定要发货吗?',
			success: async function (res) {
				if (res.confirm) {
					const res = await sheep.$api.order.expressSend(state.orderId);
					if (res) {
						sheep.$helper.toast('发货成功')
						sheep.$router.back()
					}
				}
			},
		});
	}

  async function onCategory() {
	  // 选择合箱
	  sheep.$router.go('/pages/public/choosePack', {
		  selectOrderIds: selectOrderIds
	  });
  }

  /**
   * 获取邮寄方式
   * @param type
   * @returns {string}
   */
  function getSendTypeText(orderInfo){
	  let type = orderInfo.sendType
	  switch (type){
		  case 0:
			  return '直邮-' + orderInfo.channelName ;
		  case 1:
			  return '拼邮';
	  }
  }

  function onSelectAll() {
	  console.log('全选')
	  if (state.isAllSelected) {
		  selectOrderIds.splice(0, selectOrderIds.length)
		  state.isAllSelected = false
	  } else {
		  state.orderInfo.orderItemList.forEach(order => {
			  if (!sheep.$helper.isRealEmpty(order.customsExpressId)) {
				  return;
			  }
			  if (selectOrderIds.includes(order.orderId)) {
				  return;
			  }
			  selectOrderIds.push(order.orderId)
		  })
		  state.isAllSelected = true
	  }
	  console.log('选择', selectOrderIds)
  }

  function onGoodsDetail(id) {
    sheep.$router.go('/pages/goods/index', { id });
  }

  // 取消包裹
  async function onCancel(orderId) {
    uni.showModal({
      title: '提示',
      content: '确定要取消包裹吗?',
      success: async function (res) {
        if (res.confirm) {
          const idList = [orderId]
          const res = await sheep.$api.order.cancel({idList});
          if (res) {
            sheep.$helper.toast('取消成功')
            getOrderDetail(state.orderId)
          }
        }
      },
    });
  }

  // 申请退款
  async function onRefund(order) {
	  uni.setStorageSync("refundOrder", JSON.stringify(order))
    sheep.$router.go('/pages/order/aftersale/apply')
  }

  // 查看物流
  async function onExpress(orderId) {
    sheep.$router.go('/pages/order/express/list', {
      orderId,
    });
  }

  // 确认收货
  async function onConfirm(orderId) {
    const res = await sheep.$api.order.confirm(orderId);
    if (res) {
      sheep.$helper.toast('收货成功')
      getOrderDetail(state.orderId);
    }
  }

  // 查看发票
  function onOrderInvoice(invoiceId) {
    sheep.$router.go('/pages/order/invoice', {
      invoiceId,
    });
  }

  // 配送方式详情
  function onDetail(item) {
    sheep.$router.go('/pages/order/dispatch/content', {
      id: item.order_id,
      item_id: item.id,
    });
  }

  // 评价
  function onComment(orderSN) {
    uni.$once('SELECT_INVOICE', (e) => {
      state.invoiceInfo = e.invoiceInfo;
    });
    sheep.$router.go('/pages/goods/comment/add', {
      orderSN,
    });
  }
  async function getOrderDetail(id) {
    const res = await sheep.$api.order.expressDetail({orderId: id});
		if (!sheep.$helper.isRealEmpty(res.tableInfo)) {
			state.tableData = JSON.parse(res.tableInfo)
		}
    res.orderItemList.forEach(item => {
      let str = "默认规格";
      /*const obj = JSON.parse(item.spData);
      Object.keys(obj).forEach((key) => {
        str += key + "：" + obj[key] + " ";
      });*/
      item.spDataValue = str;
    })
    state.orderInfo = res;
    state.orderId = res.orderId
    // if (state.timeToPay) {
    //   state.status = 0
    //   time(res.timeToPay)
    // } else {
    state.status = res.status
    // }
    if (res.status === 0 && res.timeToPay){
      time(res.timeToPay)
    }
    const {receiverName, receiverPhone, receiverProvince, receiverCity, receiverDistrict, receiverDetailAddress} = res
    state.address = {
      receiverName, receiverPhone,
      fullAddress: receiverProvince + ' ' + receiverCity + ' ' + receiverDistrict + ' ' + getHiddenDetailAddress(receiverDetailAddress)
    }
  }

  function getHiddenDetailAddress(data){
    const chineseNumbers = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
    if (!data || data.length === 0){
      return ''
    }
    let tempResult = data.replace((/\d/g),'*')
    let result = ''
    for(let i=0;i<tempResult.length;i++){
      if (chineseNumbers.includes(tempResult[i])){
        result += '*'
      }else {
        result += tempResult[i]
      }
    }
    return result
  }

	onShow(() => {
		getOrderDetail(state.id);
		selectOrderIds = []
	})

  onLoad(async (options) => {
    let id = '';
    // if (options.orderSN) {
    //   id = options.orderSN;
    // }
    if (options.id) {
      id = options.id;
			state.id = id;
    }
	  if (options.wms) {
		  state.wms = options.wms;
	  }
    getOrderDetail(state.id);
  });
</script>

<style lang="scss" scoped>
.score-img {
  width: 36rpx;
  height: 36rpx;
  margin: 0 4rpx;
}
.delete-btn {
  width: 160rpx;
  height: 55rpx;
  color: #F39800;
  background: white;
  border-radius: 30rpx;
  font-size: 26rpx;
  line-height: normal;
  margin-right: 10rpx;
  border: 1rpx solid #F39800;
  &:last-of-type {
    margin-right: 0;
  }
}
.apply-btn {
  width: 160rpx;
  height: 55rpx;
  border-radius: 30rpx;
  font-size: 26rpx;
  border: 2rpx solid #dcdcdc;
  line-height: normal;
  margin-right: 10rpx;

  &:last-of-type {
    margin-right: 0;
  }
}
.state-box {
  //color: rgba(#fff, 0.9);
  width: 100%;
  background-size: 100% 100%;
  box-sizing: border-box;
  .state-img {
    width: 60rpx;
    height: 60rpx;
    margin-right: 20rpx;
  }
}
.warning-color {
  color: #F39800;
}
.danger-color {
  color: #F39800;
}
.success-color {
  color: #52c41a;
}
.info-color {
  color: #999999;
}


.order-address-box {
  background-color: #fff;
  border-radius: 10rpx;
  margin: -50rpx 20rpx 16rpx 20rpx;
  padding: 44rpx 34rpx 42rpx 20rpx;
  font-size: 30rpx;
  box-sizing: border-box;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);

  .address-username {
    margin-right: 20rpx;
  }

  .address-detail {
    font-size: 26rpx;
    font-weight: 500;
    color: rgba(153, 153, 153, 1);
    margin-top: 20rpx;
  }
}

.detail-goods {
  border-radius: 10rpx;
  margin: 0 20rpx 20rpx 20rpx;

  .order-list {
    margin-bottom: 20rpx;
    background-color: #fff;

    .order-card {
      //padding: 20rpx 0;

      .order-sku {
        font-size: 24rpx;

        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        width: 450rpx;
        margin-bottom: 20rpx;

        .order-num {
          margin-right: 10rpx;
        }
      }
      .tag-btn {
        margin-left: 16rpx;
        font-size: 24rpx;
        height: 36rpx;
        color: var(--ui-BG-Main);
        border: 2rpx solid var(--ui-BG-Main);
        border-radius: 14rpx;
        padding: 0 4rpx;
      }
    }
  }
}

// 包裹信息。
.notice-box {
  background: #fff;
  border-radius: 10rpx;
  margin: 0 20rpx 20rpx 20rpx;

  .notice-box__head {
    font-size: 30rpx;

    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    line-height: 80rpx;
    border-bottom: 1rpx solid #dfdfdf;
    padding: 0 25rpx;
  }

  .notice-box__content {
    padding: 20rpx;

    .self-pickup-box {
      width: 100%;

      .self-pickup--img {
        width: 200rpx;
        height: 200rpx;
        margin: 40rpx 0;
      }
    }
  }



  .notice-item,
  .notice-item--center {
    display: flex;
    align-items: center;
    line-height: normal;
    margin-bottom: 24rpx;

    .title {
      font-size: 28rpx;
      color: #999;
    }

    .detail {
      font-size: 28rpx;
      color: #333;
      flex: 1;
    }
  }
}
.copy-btn {
  width: 100rpx;
  line-height: 50rpx;
  border-radius: 25rpx;
  padding: 0;
  background: rgba(238, 238, 238, 1);
  font-size: 22rpx;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
}

// 包裹价格信息
.order-price-box {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
  margin: 0 20rpx 20rpx 20rpx;

  .notice-item {
    line-height: 70rpx;

    .title {
      font-size: 28rpx;
      color: #999;
    }

    .detail {
      font-size: 28rpx;
      color: #333;
      font-family: OPPOSANS;
    }
  }

  .all-rpice-item {
    justify-content: flex-end;
    align-items: center;

    .title {
      font-size: 26rpx;
      font-weight: 500;
      color: #333333;
      line-height: normal;
    }
  }

  .all-price {
    font-size: 26rpx;
    font-family: OPPOSANS;
    line-height: normal;
    color: $red !important;
  }
}

// 底部
.footer-box {
  height: 100rpx;
  width: 100%;
  box-sizing: border-box;
  border-radius: 10rpx;
  padding-right: 20rpx;

  .cancel-btn {
    width: 160rpx;
    height: 60rpx;
    background: #eeeeee;
    border-radius: 30rpx;
    margin-right: 20rpx;
    font-size: 26rpx;
    font-weight: 400;
    color: #333333;
  }

  .pay-btn {
    width: 160rpx;
    height: 60rpx;
    font-size: 26rpx;
    border-radius: 30rpx;
    font-weight: 500;
    color: #fff;
  }


}

.money {
	color: #ff0010 !important;
}



.score-img {
	width: 36rpx;
	height: 36rpx;
	margin: 0 4rpx;
}
.tool-btn {
	width: 160rpx;
	height: 55rpx;
	background: white;
	font-size: 26rpx;
	border-radius: 30rpx;
	margin-right: 10rpx;

	&:last-of-type {
		margin-right: 0;
	}
}
.delete-btn {
	width: 160rpx;
	height: 55rpx;
	color: #F39800;
	background: #fee;
	border-radius: 30rpx;
	font-size: 26rpx;
	margin-right: 10rpx;
	line-height: normal;
	border: 1rpx solid #F39800;

	&:last-of-type {
		margin-right: 0;
	}
}

.apply-btn {
	width: 160rpx;
	height: 55rpx;
	border-radius: 30rpx;
	font-size: 26rpx;
	border: 2rpx solid #dcdcdc;
	line-height: normal;
	margin-left: 10rpx;

	&:last-of-type {
		margin-right: 0;
	}
}

.swiper-box {
	flex: 1;

	.swiper-item {
		height: 100%;
		width: 100%;
	}
}

.order-list-card-box {
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	box-shadow: 1px 1px 10px #d7d7d7;
	border-radius: 20rpx;
	padding: 5rpx;

	.tag {
		flex-shrink: 0;
		padding: 4rpx 10rpx;
		font-size: 24rpx;
		font-weight: 500;
		border-radius: 4rpx;
		color: #ffffff !important;
		background: #F39800;
	}


	.order-card-header {
		height: 80rpx;

		.order-no {
			font-size: 26rpx;
			font-weight: 500;
		}

		.order-state {
		}
	}

	.pay-box {
		.discounts-title {
			font-size: 24rpx;
			line-height: normal;
			color: #999999;
			margin-right: 20rpx;
		}

		.discounts-money {
			font-size: 24rpx;
			line-height: normal;
			color: #999;
			font-family: OPPOSANS;
		}

		.pay-color {
			color: #333;
		}
	}

	.order-card-footer {
		height: 100rpx;

		.more-item-box {
			padding: 20rpx;

			.more-item {
				height: 60rpx;

				.title {
					font-size: 26rpx;
				}
			}
		}

		.more-btn {
			color: $dark-9;
			font-size: 24rpx;
		}

		.content {
			width: 154rpx;
			color: #333333;
			font-size: 26rpx;
			font-weight: 500;
		}
	}
}

:deep(.uni-tooltip-popup) {
	background: var(--ui-BG);
}
.warning-color {
	color: #F39800;
}
.danger-color {
	color: #F39800;
}
.success-color {
	color: #52c41a;
}
.info-color {
	color: #999999;
}

:deep() {
	checkbox .wx-checkbox-input {
		border-radius: 50% !important;
		color: #ffffff !important;
	}

	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		color: #fff;
		background: var(--ui-BG-Main);
	}

	.wx-checkbox-input.wx-checkbox-input-checked {
		border: none !important;
	}

	.uni-checkbox-input {
		border-radius: 50% !important;
		color: #ffffff !important;
	}

	.uni-checkbox-input:hover {
		border-color: #d1d1d1 !important;
	}
}

:deep(.ui-fixed) {
	height: 72rpx;
}

.cart-box {
	width: 100%;

	.cart-header {
		height: 70rpx;
		background-color: #f6f6f6;
		width: 100%;
		position: fixed;
		left: 0;
		top: v-bind('sys_navBar') rpx;
		z-index: 1000;
		box-sizing: border-box;
	}

	.cart-footer {
		height: 100rpx;
		background-color: #fff;

		.pay-btn {
			display: inline-block;
			width: 60rpx;
			height: 70rpx;
			font-size: 28rpx;
			line-height: 28rpx;
			font-weight: 500;
			border-radius: 40rpx;
		}
	}

	.cart-content {
		margin-top: 70rpx;
		.goods-box {
			background-color: #fff;
		}
	}

}
</style>
